<template>
	<pro-table
		ref="protable"
		:loadDataUrl="api.getList"
		rowKey="userId"
		:columns="columns"
		:hasLeftDept="true"
		:extendParam="extendParam"
		disabledKey="userId"
		:disabledValue="superAdminId"
		:orgId="orgId"
		@selectedRowChange="onSelectChange"
		@setTableData="setTableData"
		@addRecord="addRecord"
		@changeSelect="changeSelect"
		@handlerReset="handlerReset"
	>
		<template slot="hd-button">
			<a-space :size="8">
				<div class="line"></div>
				<a-button type="link" :disabled="selectedRowKeys.length <= 0" @click="showDeleteConfirm(0)">删除</a-button>
				<div class="line"></div>
				<a-button type="link" :disabled="selectedRowKeys.length <= 0" @click="showResetPwdConfirm(1, selectedRowKeys)">批量重置密码</a-button>
			</a-space>
		</template>
		<span slot="operation" slot-scope="{ text, record }" class="operation" v-if="record.userType !== '00'">
			<a href="javascript:;" title="编辑" class="add" @click="editRecord(record)">编辑</a>
			<a href="javascript:;" title="删除" class="del" @click="showDeleteConfirm(1, record.userId, record.username)">删除</a>
			<a-dropdown placement="bottomRight" v-if="$_has('sys:user:setUserRole') || $_has('sys:user:resetPass')">
				<a class="add" @click="e => e.preventDefault()">更多操作</a>
				<a-menu slot="overlay">
					<a-menu-item @click="setRoleUser(record)" v-if="$_has('sys:user:setUserRole')">
						<i class="iconfont icon-role"></i>
						分配角色
					</a-menu-item>
					<a-menu-item @click="showResetPwdConfirm(0, record)" v-if="$_has('sys:user:resetPass')">
						<i class="iconfont icon-changepwd"></i>
						重置密码
					</a-menu-item>
				</a-menu>
			</a-dropdown>
		</span>
		<template slot="compressAvatar" slot-scope="{ text, record, index }">
			<img :src="fileUrl+record.compressAvatar" :large="fileUrl+record.avatar" v-if="text" class="avatar" :preview="index" :preview-text="record.name" />
		</template>
		<div slot="realName" slot-scope="{ text, record }">
			<a-tooltip placement="topLeft">
				<template slot="title">
					<span>{{ text }}</span>
				</template>
				<div>{{ text }}</div>
			</a-tooltip>
		</div>
		<div slot="roleNames" slot-scope="{ text, record }">
			<a-tooltip placement="topLeft" v-for="(item, index) in text">
				<template slot="title">
					<span>{{ item }}</span>
				</template>
				<div>{{ item }}</div>
			</a-tooltip>
		</div>
		<div slot="deptName" slot-scope="{ text, record }">
			<a-tooltip placement="topLeft">
				<template slot="title">
					<span>{{ text }}</span>
				</template>
				<div>{{ text }}</div>
			</a-tooltip>
		</div>
		<span class="tag" :class="{ active: text == 1 }" slot="status" slot-scope="{ text }">{{ text == 0 ? '启用' : '停用' }}</span>
		<span slot="userType" slot-scope="{ text }">{{ text == '00' ? '超级管理员' : text == '01' ? '运维账户' : '普通账户' }}</span>
		<!-- 添加，编辑 -->
		<add-or-edit-user-modal ref="addOrEditModal" :api="api" modalTitle="账号" @ok="handlerRefresh"></add-or-edit-user-modal>
		<!-- 角色 -->
		<set-role-modal ref="setRoleModal" @ok="handlerRefresh"></set-role-modal>
		<!-- 重置密码 -->
		<rest-password-modal ref="restPasswordModal"></rest-password-modal>
	</pro-table>
</template>

<script>
import { rowSelection, recordOperation } from '@/mixins';
import { sysManageapi } from '@/api/index.js';
import addOrEditUserModal from './module/addOrEditUserModal';
import restPasswordModal from './module/restPasswordModal';
import setRoleModal from './module/setRoleModal';
import { mapState, mapMutations, mapActions } from 'vuex';
const columns = [
	{
		title: '所属机构',
		dataIndex: 'orgName',
		key: 'orgName',
		searchInfo: {
			value: 'orgId',
			type: 'select',
			defaultValue: undefined,
			optionlist: []
		},
		ellipsis: true
	},
	{
		title: '头像',
		dataIndex: 'compressAvatar',
		key: 'compressAvatar',
		align: 'center',
		scopedSlots: {
			customRender: 'compressAvatar'
		}
	},
	{
		title: '账户',
		dataIndex: 'username',
		key: 'username',
		searchInfo: {
			type: 'string',
			defaultValue: ''
		},
		ellipsis: true
	},
	{
		title: '姓名',
		dataIndex: 'realName',
		key: 'realName',
		scopedSlots: {
			customRender: 'realName'
		},
		searchInfo: {
			type: 'string',
			defaultValue: ''
		}
	},
	{
		title: '部门名称',
		dataIndex: 'deptName',
		key: 'deptName',
		scopedSlots: {
			customRender: 'deptName'
		}
	},
	{
		title: '账户类型',
		dataIndex: 'userType',
		key: 'userType',
		scopedSlots: {
			customRender: 'userType'
		}
	},
	{
		title: '角色',
		dataIndex: 'roleNames',
		key: 'roleNames',
		scopedSlots: {
			customRender: 'roleNames'
		}
	},
	{
		title: '邮箱',
		key: 'email',
		dataIndex: 'email',
		ellipsis: true
	},
	{
		title: '手机号码',
		key: 'phone',
		dataIndex: 'phone',
		width: 120,
		searchInfo: {
			type: 'string',
			defaultValue: ''
		}
	},
	{
		title: '状态',
		dataIndex: 'status',
		key: 'status',
		align: 'center',
		width: 100,
		scopedSlots: {
			customRender: 'status'
		},
		searchInfo: {
			type: 'select',
			defaultValue: undefined,
			optionlist: [
				{
					value: 0,
					text: '启用'
				},
				{
					value: 1,
					text: '停用'
				}
			]
		}
	},
	{
		title: '操作',
		key: 'operation',
		dataIndex: 'operation',
		scopedSlots: { customRender: 'operation' },
		// align: 'center',
		width: 200,
		fixed: 'right'
	}
];
export default {
	name: 'userlist',
	mixins: [rowSelection, recordOperation],
	components: {
		addOrEditUserModal,
		setRoleModal,
		restPasswordModal
	},
	data() {
		return {
			columns: [],
			api: sysManageapi.userUrl,
			extendParam: {},
			fileUrl: process.env.VUE_APP_FILE_API,
			tablelist: [],
			superAdminId: '',
			orgId: ''
		};
	},
	computed: {
		...mapState(['user'])
	},
	created() {
		this.columns = columns.filter(item => {
			if (!(!this.isAdmin && item.key == 'userType')) {
				return item;
			}
		});
	},
	methods: {
		/* 确认重置密码 */
		showResetPwdConfirm(type, record) {
			this.$refs.restPasswordModal.resetPwd(type, record);
		},
		setRoleUser(record) {
			this.$refs.setRoleModal.show(record);
		},
		/* 选中部门，刷新列表 */
		selectTree(selectedDept) {
			this.selectedDept = !!selectedDept ? { ...selectedDept } : null;
			this.extendParam = {
				deptId: !!selectedDept ? this.selectedDept.deptId : ''
			};
			this.$nextTick(() => {
				this.handlerRefresh();
			});
		},
		setTableData(list) {
			this.tablelist = [...list];
			let superAdmin = this.tablelist.find(item => item.userType == '00');
			console.log('superAdmin' + JSON.stringify(superAdmin));
			this.superAdminId = (superAdmin ? superAdmin.userId : '') || '';
		},
		changeSelect(e, value) {
			if (value == 'orgId') {
				this.orgId = e;
			}
		},
		/* 筛选条件重置, 将渔场默认设置为undefined */
		handlerReset(obj) {
			this.orgId = 1;//为了刷新一次选中部门
			this.$nextTick(() => {
				this.orgId = '';
				this.$refs.protable.loadTable();
			});
		}
	}
};
</script>

<style scoped="scoped" lang="less">
.avatar {
	width: 60px;
	height: 60px;
	border-radius: 8px;
	display: block;
	margin: 0 auto;
}
</style>
